<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.scss">
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${assets}/js/views/bpAbnormal.js"></script>
    <script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>
    <style>
        *{
            padding:0;
            list-style: none;
            text-decoration: none;
            font-weight:100;
            font-family:"微软雅黑";
            margin:0;
        }
        body{
            height:100%;
        }
        span{
            font:15px/33px 微软雅黑;
            display:inline-block;
        }
        b{
            font-weight:600 !important;
            color:black;
            line-height:60px !important;
        }
        h4{
            font:22px/34px 微软雅黑;
            color:black;
        }
        h3{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #2a3137;
            line-height:34px;
        }
        .title{
            line-height:25px;
            margin-bottom: 5px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
        }
        .title1{
            line-height:25px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
            margin-top:5px;
        }
        .test p{
            width:100%;
            line-height:100px;
            font-size:15px;
            text-align:center;
        }
        thead tr th{
            text-align:center;
        }
        .table tr{
            height:42px;
        }
        /*thead hr{*/
        /*border-top: none !important;*/
        /*border-bottom: none !important;*/
        /*}*/
        #tablepart #example tr{
            border:none !important;
        }
        #tablepart #example tbody tr td{
            border:none !important;
            font:15px/42px 微软雅黑
        }
        #tablepart #example tbody tr{
            height:42px !important;
        }
        #tablepart #example thead tr th{
            color:#999999 !important;
            font:15px/42px 微软雅黑;
            border:none !important;
        }
        .dataTable{
            text-align:center;
        }
        .daterange i {
            position: absolute;
            bottom: 10px;
            right: 14px;
            top: auto;
            cursor: pointer;
        }
        .daterange {
            position: relative;
        }
        .container1{
            display:inline-block;
            width:100%;
            margin-top:12px;
        }
        .times{
            display:inline-block;
            width:150px;
        }
        .pagination{
            float:right !important;
        }
        .btn{
            width:100px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            line-height:18px;
            background:#35acfd
        }
        #tablepart #example tbody tr{
            border-bottom:1px solid #e6e6e6 !important;
        }
        img{
            max-width:100%;
            height:auto;
        }
        a{
            text-decoration:none;
        }
        .page_nav li{
            list-style:none !important;
        }
        thead tr{
            background:#e6e6e6;
        }
        input{
            width:100%;
            line-height: 32px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
        }
        .changelist{
            display:inline-block;
            position:relative;
            top:20px;
            width:580px;
            height:34px;
            float:right;
            margin-right:30px;
        }
        .changelist li{
            float:left;
            height:34px;
            margin-right:30px;
            width:84px;
            border-radius: 17px;
        }
        .changelist li button{
            width: 84px;
            line-height: 34px;
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            border:none;
            border-radius: 17px;
            color:#999999;
            background:none;
            outline:none;
        }
        .active_button{
            background:#35acfd !important;
            color:white !important;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="../../breadline.jsp" %>
</div>
<div class="wrap">
    <div id="main" class="content">
        <div style="width:99%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);">
            <div class="test" style="margin-left:19px;width:97%;">
                <div style="width:100%;overflow:hidden;">
                    <h3 style="display:inline-block">血压信息</h3>
                    <ul class="changelist">
                        <li>
                            <button>日</button>
                        </li>
                        <li>
                            <button>周</button>
                        </li>
                        <li>
                            <button class="active_button">月</button>
                        </li>
                        <li>
                            <button>季度</button>
                        </li>
                        <li>
                            <button>年</button>
                        </li>
                    </ul>
                </div>
                <div v-if="!mainbar" id="mainBar" style="height:280px;width:100%;margin-top:14px;"></div>
                <p v-else="mainbar">暂无数据</p>
            </div>
        </div>
        <div style="width:98%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);margin-top:20px;">
            <div class="test" style="margin-left:19px;width:95%;">
                <div style="width:100%;overflow:hidden;">
                    <h3>血压报告</h3>
                </div>
                <div class="container1" class="row">
                    <span style="display:inline-block;text-align:center;float:left;width:71px;"> 时间</span>
                    <div style="display:inline-block;float:left;">
                        <div class="times">
                            <div id="PrevTime" class="input-group date form_date" style="width: 100%"  data-date-format="yyyy-mm-dd">
                                <input id="beginDate" type="text" class="lay-date" placeholder="  开始日期" readonly>
                            </div>
                        </div>
                        <div class="times" style="margin-left:24px;">
                            <div id="NextTime" class="input-group date form_date" style="width: 100%" data-date-format="yyyy-mm-dd">
                                <input id="endDate" type="text" class="lay-date" placeholder="  结束日期" readonly>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-info" onclick="search();" style="margin-left:20px;">
                        <img src="../assets/images/search.png" alt="" style="width:18px;"> 搜索
                    </button>
                </div>
                <div id="tablepart">
                    <table id="example" class="display" cellspacing="10" width="95%">
                        <thead>
                        <tr style="bordr:none !important;cursor:auto !important">
                            <th style="width:8% !important">异常</th>
                            <th style="width:22.5% !important">检测时间</th>
                            <th style="width:22.5% !important">收缩压(mmHg)</th>
                            <th style="width:22.5% !important">舒张压(mmHg)</th>
                            <th style="width:22.5% !important">心率(bmp)</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
    <script>
        var vm = new Vue({
            el : "#main",
            data:{
                // 血压数据
                BpInfo:{
                    data:[],
                    firstjson:[],
                    secondjson:[],
                    thirdjson:[]
                },
                mainbar:false,
                show:false,
                bpjson:'',
                tablejson:[],
                dates:''
            },
            methods:{
                changejson : function(data,n){
                    var newdate = []
                    var firstjson = []
                    var secondjson = []
                    var newdate1 = []
                    var data1 = []
                    var datas = []
                    let that = this;
                    if( data.length != 0  ){
                        for (var a = 0; a < data.length; a++) {
                            if (data[a].testItemCode === '104001') {
                                newdate.push(data[a].testTime)
                                datas = newdate
                                firstjson.push(data[a].testValue)
                            }else if ( data[a].testItemCode === '104002' ) {
                                secondjson.push(data[a].testValue)
                                newdate1.push(data[a].testTime)
                                data1 = newdate1
                            }
                        }
                    }else{
                        that.BpInfo.firstjson = ""
                        that.BpInfo.secondjson = ""
                    }
                    var maxVal = getMax(firstjson,secondjson)
                    if( n === 1 ){
                        that.echart1(datas,firstjson,data1,secondjson,maxVal)
                    }else{
                        that.echart(datas,firstjson,data1,secondjson,maxVal)
                    }
                },
                add:function(n,date){
                    var str = ''
                    var d = new Date(date);
                    if (d == "Invalid Date") {
                        alert("非日期");
                        return;
                    }
                    //当前日期的毫秒数 + 天数 * 一天的毫秒数
                    var n = d.getTime() + 1 * 24 * 60 * 60 * 1000;
                    var result = new Date(n);
                    str = result.getFullYear() + "-" + (result.getMonth() + 1) + "-" + result.getDate();
                    return str
                },
                echart : function (datas,firstjson,data1,secondjson,maxVal){
                    let that = this;
                    var myChart = echarts.init(document.getElementById('mainBar'))
                    myChart.setOption({
                        'tooltip' : {
                            'trigger': 'axis',
                            'formatter' : function (params) {
                                var str = ''
                                for( var i = 0; i < params.length; i++ ){
                                    if( params.length === '0' ){
                                        str += ""
                                    }else{
                                        if( !params[i].data[1] ){
                                            params[i].data[1] = ""
                                        }
                                        str += params[i].marker+params[i].seriesName+":"+params[i].data[1]+"<br>"
                                    }
                                }
                                if( params.length === '0' || params[0].value.length != 2 ){
                                    str += ""
                                }else{
                                    params.push({
                                        time : params[0].data[0]
                                    })
                                    str += '检查时间' + ':' + params[params.length-1].time
                                }
                                return str
                            }
                        },
                        'xAxis' : [{
                            'type':'time',
                            'boundaryGap':true,
                            'splitNumber':5,
                            'axisLabel':{
                                'intreval':'auto',
                                'textStyle':{
                                    'color':'black',
                                    'fontSize':'14'
                                }
                            },
                            'splitLine':{
                                'show':false
                            },
                            'axisLine':{
                                'lineStyle':{
                                    'color':'#b6b6b6'
                                }
                            },
                            'axisTick':{
                                'show':false
                            }
                        }],
                        'yAxis' : [
                            {
                                'type':'value',
                                'max': maxVal,
                                'min': 0,
                                'axisLabel':{
                                    'intreval':0,
                                    'textStyle':{
                                        'color':'black',
                                        'fontSize':'16',
                                        'shadowOffset':-5
                                    }
                                },
                                'splitLine' : {
                                    'show' : false
                                },
                                'axisLabel' : {
                                    formatter: function(){
                                        return "";
                                    }
                                },
                                'axisLine':{
                                    'lineStyle':{
                                        'color':'#b6b6b6'
                                    }
                                },
                                'axisTick':{
                                    'show':false
                                }
                            },
                            {
                                'type':'value',
                                'max': maxVal,
                                'min': 0,
                                'splitLine' : {
                                    'show' : false
                                },
                                'show':false,
                                'axisLabel':{
                                    'intreval':0,
                                    'textStyle':{
                                        'color':'black',
                                        'fontSize':'16',
                                        'shadowOffset':-5
                                    }
                                },
                                'axisLabel' : {
                                    formatter: function(){
                                        return "";
                                    }
                                },
                                'axisLine':{
                                    'lineStyle':{
                                        'color':'#b6b6b6'
                                    }
                                },
                                'axisTick':{
                                    'show':false
                                }
                            }
                        ],
                        'series' : [
                            {
                                'name': 'x轴时间',
                                'type': 'line',
                                'data': (function () {
                                    var d = [];
                                    for( var len = 0; len < that.dates.length; len++ ){
                                        d.push([
                                            that.dates[len]
                                        ]);
                                    }
                                    return d;
                                })()
                            },
                            {
                                'name':'收缩压',
                                'type':'line',
                                'data': (function () {
                                    var d = [];
                                    for( var len = 0; len < firstjson.length; len++ ){
                                        d.push([
                                            datas[len],
                                            firstjson[len]
                                        ]);
                                    }
                                    return d;
                                })(),
                                'itemStyle':{
                                    'normal':{
                                        'color':'#00d2cb',
                                        'lineStyle':{
                                            'color':'#00d2cb'
                                        }
                                    }
                                }
                            },
                            {
                                'name':'舒张压',
                                'type':'line',
                                'data': (function () {
                                    var d = [];
                                    for( var len = 0; len < secondjson.length; len++ ){
                                        d.push([
                                            data1[len],
                                            secondjson[len]
                                        ]);
                                    }
                                    return d;
                                })(),
                                'symbol':'circle',
                                'symbolSize':18,
                                'itemStyle':{
                                    'normal':{
                                        'color':'#3a85ff',
                                        'lineStyle':{
                                            'color':'#3a85ff'
                                        }
                                    }
                                }
                            }
                        ]
                    })
                },
                echart1 : function (datas,firstjson,data1,secondjson,maxVal){
                    let that = this;
                    datas = datas.reverse();
                    firstjson = firstjson.reverse();
                    secondjson = secondjson.reverse();
                    var myChart = echarts.init(document.getElementById('mainBar'))
                    myChart.setOption({
                        'tooltip' : {
                            'trigger': 'axis',
                            'formatter' : function (params) {
                                var str = ''
                                for( var i = 0; i < params.length; i++ ){
                                    if( params.length === '0' ){
                                        str += ""
                                    }else{
                                        str += params[i].marker+params[i].seriesName+":"+params[i].data+"<br>"
                                    }
                                }
                                if( params.length === '0' ){
                                    str += ""
                                }else{
                                    params.push({
                                        time : params[0].axisValue
                                    })
                                    str += '检查时间' + ':' + params[params.length-1].time
                                }
                                return str
                            }
                        },
                        'yAxis' : [
                            {
                                'type':'value',
                                'max': maxVal,
                                'min': 0,
                                'axisLabel':{
                                    'intreval':0,
                                    'textStyle':{
                                        'color':'black',
                                        'fontSize':'16',
                                        'shadowOffset':-5
                                    }
                                },
                                'splitLine' : {
                                    'show' : false
                                },
                                'axisLabel' : {
                                    formatter: function(){
                                        return "";
                                    }
                                },
                                'axisLine':{
                                    'lineStyle':{
                                        'color':'#b6b6b6'
                                    }
                                },
                                'axisTick':{
                                    'show':false
                                }
                            },
                            {
                                'type':'value',
                                'max': maxVal,
                                'min': 0,
                                'splitLine' : {
                                    'show' : false
                                },
                                'show':false,
                                'axisLabel':{
                                    'intreval':0,
                                    'textStyle':{
                                        'color':'black',
                                        'fontSize':'16',
                                        'shadowOffset':-5
                                    }
                                },
                                'axisLabel' : {
                                    formatter: function(){
                                        return "";
                                    }
                                },
                                'axisLine':{
                                    'lineStyle':{
                                        'color':'#b6b6b6'
                                    }
                                },
                                'axisTick':{
                                    'show':false
                                }
                            }
                        ],
                        'xAxis' : [{
                            'type':'category',
                            'boundaryGap' : true,
                            'axisLabel':{'interval': 0},
//                            'boundaryGap':true,
                            'data':datas,
                            'splitNumber':7,
                            'axisLabel':{
                                'intreval':'auto',
                                'textStyle':{
                                    'color':'black',
                                    'fontSize':'14'
                                },
                                'formatter':function(value){
                                    return value.slice(0,10)
                                }
                            },
                            'splitLine':{
                                'show':false
                            },
                            'axisLine':{
                                'lineStyle':{
                                    'color':'#b6b6b6'
                                }
                            },
                            'axisTick':{
                                'show':false
                            }
                        }],
                        'series' : [
                            {
                                'name':'收缩压',
                                'type':'line',
                                'data': firstjson,
                                'itemStyle':{
                                    'normal':{
                                        'color':'#00d2cb',
                                        'lineStyle':{
                                            'color':'#00d2cb'
                                        }
                                    }
                                }
                            },
                            {
                                'name':'舒张压',
                                'type':'line',
                                'data': secondjson,
                                'symbol':'circle',
                                'symbolSize':18,
                                'itemStyle':{
                                    'normal':{
                                        'color':'#3a85ff',
                                        'lineStyle':{
                                            'color':'#3a85ff'
                                        }
                                    }
                                }
                            }
                        ]
                    })
                }
            },
            mounted(){
                let that = this;
                // input范围选择器
                var query = window.location.search;
                var url = query.split('?')[1].split('&')[0].split('=')[1]
                // 获取血压趋势数据
                $.ajax({
                    url:"${URL_TESTREAULT_SEARCHRESULT}",
                    type:"post",
                    dataType:"json",
                    data:{
                        idCard:url,
                        testKindCode:'104',
                        date:'month',
                        sort:'desc',
                        iDisplayLength:'10000'
                    },
                    success:function(data){
                        if( data.dataList == null ){
                            that.mainbar = true;
                        }else{
                            // 获取对应数据 渲染页面
                            that.bpjson = data.dataList;
                            var bpList = data.dataList.reverse();
                            for( var a = 0 ; a < bpList.length ; a++ ){
                                if( bpList[a].testItemCode === '104001' ){
                                    that.BpInfo.firstjson.push(bpList[a].testValue);
                                    that.BpInfo.data.push(bpList[a].testTime)
                                }
                                if( that.bpjson[a].testItemCode === '104002' ){
                                    that.BpInfo.secondjson.push(bpList[a].testValue)
                                }
                                if( bpList[a].testItemCode === '104003'){
                                    that.BpInfo.thirdjson.push(bpList[a].testValue)
                                }
                            }
                            for( var i = 0 ; i < that.BpInfo.firstjson.length ; i++ ){
                                that.tablejson.push({
                                    szy : that.BpInfo.firstjson[i],
                                    ssy : that.BpInfo.secondjson[i],
                                    xl :  that.BpInfo.thirdjson[i],
                                    time : that.BpInfo.data[i],
                                    change : ""
                                })
                                //  检测是否异常
                                if( that.BpInfo.firstjson[i] >= 140 && that.BpInfo.secondjson[i] >= 90 ){
                                    that.tablejson[i].change = "异常"
                                }
                            }
                            var endDate = that.add(1,data.endDate)
                            var startDate = that.add(1,data.startDate)
                            that.dates = [endDate,startDate]
                            var maxVal = getMax(that.BpInfo.firstjson,that.BpInfo.secondjson)
                            //基于准备好的dom,初始化echart图表
                            var myChart = echarts.init(document.getElementById('mainBar'))
                            var options = {
                                'title' : {
                                    'text':'血压(mmHg)',
                                    'textStyle':{
                                        'color':'#b0b0b0',
                                        'fontStyle':'normal',
                                        'fontWeight':'lignter',
                                        'fontSize':18
                                    }
                                },
                                'tooltip' : {
                                    'trigger': 'axis',
                                   'formatter' : function (params) {
                                        var str = ''
                                        for( var i = 0; i < params.length; i++ ){
                                        if( params.length === '0' ){
                                            str += ""
                                        }else{
                                            if( !params[i].data[1] ){
                                                params[i].data[1] = ""
                                            }
                                            str += params[i].marker+params[i].seriesName+":"+params[i].data[1]+"<br>"
                                        }
                                    }
                                    if( params.length === '0' || params[0].value.length != 2 ){
                                        str += ""
                                    }else{
                                        params.push({
                                            time : params[0].data[0]
                                        })
                                        str += '检查时间' + ':' + params[params.length-1].time
                                    }
                                    return str
                                  }

                                },
                                'calculable' : true,
                                'grid':{
                                    'left':'2%',
                                    'right':'7%',
                                    'top':'10%',
                                    'bottom':'5%',
                                    'containLabel':true,
                                    'y2':50,
                                    'borderWidth':'0'
                                },
                                'xAxis' : [{
                                    'type':'time',
                                    'boundaryGap':true,
                                    'splitNumber':5,
                                    'axisLabel':{
                                        'intreval':'auto',
                                        'textStyle':{
                                            'color':'black',
                                            'fontSize':'14'
                                        }
                                    },
                                    'splitLine':{
                                        'show':false
                                    },
                                    'axisLine':{
                                        'lineStyle':{
                                            'color':'#b6b6b6'
                                        }
                                    },
                                    'axisTick':{
                                        'show':false
                                    }
                                }],
                                'yAxis' : [
                                    {
                                        'type':'value',
                                        'max': maxVal,
                                        'min': 0,
                                        'axisLabel':{
                                            'intreval':0,
                                            'textStyle':{
                                                'color':'black',
                                                'fontSize':'16',
                                                'shadowOffset':-5
                                            }
                                        },
                                        'splitLine' : {
                                            'show' : false
                                        },
                                        'axisLabel' : {
                                            formatter: function(){
                                                return "";
                                            }
                                        },
                                        'axisLine':{
                                            'lineStyle':{
                                                'color':'#b6b6b6'
                                            }
                                        },
                                        'axisTick':{
                                            'show':false
                                        }
                                    },
                                    {
                                        'type':'value',
                                        'max': maxVal,
                                        'min': 0,
                                        'splitLine' : {
                                            'show' : false
                                        },
                                        'show':false,
                                        'axisLabel':{
                                            'intreval':0,
                                            'textStyle':{
                                                'color':'black',
                                                'fontSize':'16',
                                                'shadowOffset':-5
                                            }
                                        },
                                        'axisLabel' : {
                                            formatter: function(){
                                                return "";
                                            }
                                        },
                                        'axisLine':{
                                            'lineStyle':{
                                                'color':'#b6b6b6'
                                            }
                                        },
                                        'axisTick':{
                                            'show':false
                                        }
                                    }
                                ],
                                'series' : [
                                    {
                                        'name': 'x轴时间',
                                        'type': 'line',
                                        'data': (function () {
                                            var d = [];
                                            for( var len = 0; len < that.dates.length; len++ ){
                                                d.push([
                                                    that.dates[len]
                                                ]);
                                            }
                                            return d;
                                        })()
                                    },
                                    {
                                        'name':'收缩压',
                                        'type':'line',
                                        'markLine':{
                                            'symbol' : 'none',
                                            'symbolSize' : [4, 2],
                                            'itemStyle' : {
                                                'normal': {
                                                    'label':{
                                                        'position':'left',
                                                        'textStyle':{'color':'black'}
                                                    }
                                                }
                                            },
                                            'data':[
                                                {
                                                    'yAxis':60,
                                                    'name':'60',
                                                    'itemStyle':{
                                                        'normal':{
                                                            'color':'#feacb0'
                                                        }
                                                    }
                                                },
                                                {
                                                    'yAxis':90,
                                                    'name':'90',
                                                    'itemStyle':{
                                                        'normal':{
                                                            'color':'#fd5962'
                                                        }
                                                    }
                                                },
                                                {
                                                    'yAxis':110,
                                                    'name':'110',
                                                    'itemStyle':{
                                                        'normal':{
                                                            'color':'#red'
                                                        }
                                                    }
                                                }
                                            ]
                                        },
                                        'data': (function () {
                                            var d = [];
                                            for( var len = 0; len < that.BpInfo.firstjson.length; len++ ){
                                                d.push([
                                                    that.BpInfo.data[len],
                                                    that.BpInfo.firstjson[len]
                                                ]);
                                            }
                                            return d;
                                        })(),
                                        'itemStyle':{
                                            'normal':{
                                                'color':'#00d2cb',
                                                'lineStyle':{
                                                    'color':'#00d2cb'
                                                }
                                            }
                                        },
                                        'symbol':'circle',
                                        'symbolSize':16
                                    },
                                    {
                                        'name':'舒张压',
                                        'type':'line',
                                        'markLine':{
                                            'symbol' : 'none',
                                            'symbolSize' : [4, 2],
                                            'itemStyle' : {
                                                'normal': {
                                                    'label':{
                                                        'position':'left',
                                                        'textStyle':{'color':'black'}
                                                    }
                                                }
                                            },
                                            'data':[
                                                {
                                                    'yAxis':140,
                                                    'name':'140',
                                                    'itemStyle':{
                                                        'normal':{
                                                            'color':'#feacb0'
                                                        }
                                                    }
                                                },
                                                {
                                                    'yAxis':160,
                                                    'name':'160',
                                                    'itemStyle':{
                                                        'normal':{
                                                            'color':'#fd5962'
                                                        }
                                                    }
                                                },
                                                {
                                                    'yAxis':180,
                                                    'name':'180',
                                                    'itemStyle':{
                                                        'normal':{
                                                            'color':'red'
                                                        }
                                                    }
                                                }
                                            ]
                                        },
                                        'data': (function () {
                                            var d = [];
                                            for( var len = 0; len < that.BpInfo.secondjson.length; len++ ){
                                                d.push([
                                                    that.BpInfo.data[len],
                                                    that.BpInfo.secondjson[len]
                                                ]);
                                            }
                                            return d;
                                        })(),
                                        'symbol':'circle',
                                        'symbolSize':18,
                                        'itemStyle':{
                                            'normal':{
                                                'color':'#3a85ff',
                                                'lineStyle':{
                                                    'color':'#3a85ff'
                                                }
                                            }
                                        }
                                    }
                                ]
                            }
                            myChart.setOption(options)
                            window.addEventListener('resize',function(){
                                myChart.resize()
                            })
                      }
                   }
                })
            // 点击切换
            var buttons = $('.changelist button')
            for( var a = 0; a < buttons.length; a++ ){
                $(buttons[a]).on('click',function(){
                    $(this).addClass('active_button')
                    $(this).parent().siblings().find('button').removeClass('active_button')
                    if( $(this).text() === '周' ){
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'104',
                                date:'week',
                                sort:'desc',
                                iDisplayLength:'10000'
                            },
                            success:function(data) {
                                var n = 0;
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '月' ){
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'104',
                                date:'month',
                                sort:'desc',
                                iDisplayLength:'10000'
                            },
                            success:function(data) {
                                var n = 0;
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '季度' ){
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'104',
                                date:'quarter',
                                sort:'desc',
                                iDisplayLength:'10000'
                            },
                            success:function(data) {
                                var n = 0;
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '年' ){
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'104',
                                date:'year',
                                sort:'desc'
                            },
                            success:function(data) {
                                var n = 0;
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '日' ){
                        $.ajax({
                            url:"${URL_PATIENT_BPINFO}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url
                            },
                            success:function(data) {
                                var dataJosn;
                                if( data.data.bpList.length > 21 ){
                                    dataJosn = data.data.bpList.slice(0,21)
                                }else{
                                    dataJosn = data.data.bpList
                                }
                                var endDate,
                                    startDate;
                                var n = 1;
                                for( let a= 0; a < dataJosn.length; a++ ){
                                    if( dataJosn[a].testItemCode === "104001" ){
                                        endDate = dataJosn[0].testTime.slice(0,10)
                                    }else if( dataJosn[a].testItemCode === "104002" ){
                                        startDate = dataJosn[dataJosn.length-1].testTime.slice(0,10)
                                    }
                                }
                                endDate = that.add(1,endDate)
                                startDate = that.add(1,startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(dataJosn,n)
                            }
                        })
                    }
                })
            }
            }
        })
        // boot时间选择器插件
        $(document).ready(function() {
            initLayDate('#beginDate');
            initLayDate('#endDate');
        });
        function getMax(data1,data){
            var max = '';
            // 获取两组数据的最大值
            if( data1.length != 0 && data.length != 0 ){
                if( Math.max.apply(null,data1 ) > Math.max.apply(null,data) ){
                    max = Math.max.apply(null,data1) + 10
                }else if( Math.max.apply(null,data1 ) < Math.max.apply(null,data) ){
                    max = Math.max.apply(null,data) + 10
                }else{
                    max = Math.max.apply(null,data) + 10
                }
                if( max < 200 ){
                    max = 200
                }
            }else if( data1.length != 0 || data.length != 0 ){
                if( data1.length != 0 ){
                    max = Math.max.apply(null,data1)+ 10
                }else{
                    max = Math.max.apply(null,data)+ 10
                }
                if( max < 200 ){
                    max = 200
                }
            }else{
                max = 200
            }
            console.log(max)
            return max
        }
        var table;
        var begintime;
        var endtime;
        let that = this;
        // input范围选择器
        var query = window.location.search.substring(1);
        var vars = query.split("=");
        //获取ID
        var url = vars[1].toString()
        var idCard='${URL_PATIENT_BPINFO}?idCard='+url
        function search(){
            refreshTable()
        }
        function initTable() {
            table = $('#example').DataTable({
                "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-10'><'col-xs-6'f>r>" +
                "t" +
                "<'row'<'col-xs-6'p>>",
                "bFilter": false,//去掉搜索框
                "bAutoWidth": true, //自适应宽度
                "bPaginate": true, //翻页功能
                "bSort": true, //排序功能
                "bAutoWidth": true,//自动宽度
                "info": false,
                "searching" : false, //去掉搜索框方法一
                'lengthChange' : false,
                "oPaginate":false,
                "bServerSide" : true,
                "lengthChange": false,   //选择每页显示多少条数据，下拉选项
                "paginationType": "full_numbers",      //详细分页组，可以支持直接跳转到某页
                "lengthMenu": [10],
                "sAjaxSource":idCard,
                "sAjaxDataProp": "bpList",//查询后，返回的集合
                "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
                    aoData.push(
                        {
                            "name": "beginTime",
                            "value": $('#beginDate').val()
                        },
                        {
                            "name": "endTime",
                            "value": $('#endDate').val()
                        }
                    ),
                        $.ajax( {
                            "dataType": 'json',
                            "url": sSource,
                            "type":'post',
                            "data": aoData,
                            "success": function(resp){
                                var map = {},
                                    dest = [];
                                    testtime = [];
                                    szy = [];
                                    xl = [];
                                    ssy = [];
                                if( resp.data.bpList != null ){
                                    var arr = resp.data.bpList;
                                    for(var i = 0; i < arr.length; i++){
                                        var ai = arr[i];
                                        // 舒张压
                                        if( arr[i].testItemCode === "104001" ){
                                            szy.push(ai.testValue)
                                            testtime.push(ai.testTime)
                                        }
                                        // 收缩压
                                        if( arr[i].testItemCode === "104002" ){
                                            ssy.push(ai.testValue)
                                        }
                                        // 心率
                                        if( arr[i].testItemCode === "104003" ){
                                            xl.push(ai.testValue)
                                        }
                                    }
                                    for( var a = 0 ; a < szy.length; a++ ){
                                        dest.push({
                                            change : "",
                                            time : testtime[a],
                                            ssy : ssy[a],
                                            szy : szy[a],
                                            xl : xl[a]
                                        })
                                        if(dest[a].ssy >= 90  || dest[a].szy >= 140 || dest[a].ssy < 60 || dest[a].szy < 90  ){
                                            dest[a].change = '异常'
                                        }else{
                                            dest[a].change = ''
                                        }
                                    }
                                    resp.data.bpList = dest;
                                    // resp.data.iTotalDisplayRecords = dest.length;
                                    resp.data.iTotalDisplayRecords = resp.data.iTotalDisplayRecords / 3; // 总记录数 / 3
                                    fnCallback(resp.data)
                                }else{
                                    resp.data.bpList = []
                                    fnCallback(resp.data)
                                }
                            }
                        } );
                },
                "aoColumns" : [ {
                    "targets": 0,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html('<span style="color:red">'+oData.change+'</span>')
//                        $(nTd).text(oData.change)
                    }
                },{
                    "mDataProp" : "time"
                },{
                    "targets": 1,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if( oData.szy === undefined ){
                            $(nTd).text("")
                        }else{
                            if( oData.szy >= 140 || oData.szy < 90  ){
                                $(nTd).html('<span style="color:red">'+oData.szy+'</span>')
                            }else{
                                $(nTd).text(oData.szy)
                            }
                        }
                    }
                },{
                    "targets": 2,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if( oData.ssy === undefined ){
                            $(nTd).text("")
                        }else{
                            if( oData.ssy >= 90 || oData.ssy < 60 ){
                                $(nTd).html('<span style="color:red">'+oData.ssy+'</span>')
                            }else{
                                $(nTd).text(oData.ssy)
                            }
                        }
                    }
                },{
                    "targets": 3,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if( oData.xl === undefined ){
                            $(nTd).text("")
                        }else{
                            $(nTd).text(oData.xl )
                        }
                    }
                }],
                "oLanguage": {//插件的汉化
                    "sLengthMenu": "32",
                    "sZeroRecords" : "抱歉， 没有找到",
                    "sInfoEmpty" : "没有数据",
                    "sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
                    "oPaginate" : {
                        "sFirst" : "",
                        "sPrevious" : "<b>上一页<b>",
                        "sLast" : "",
                        "sNext" : "<i>下一页</i>"

                    },
                    "sZeroRecords" : "没有检索到数据",
                    "sProcessing" : "<img src='' />",
                    "sSearch" : "搜索"
                }
            });
        }
        initTable()
    </script>
</body>
</html>
